<template>
  <!-- 下载模板弹出层     -->
  <div v-if="isShow" class="popups" @click.self="toggle">
    <el-main style="width: 37%;height: 75%;overflow: hidden">
      <div class="header">
        <h3 style="flex: 1;font-weight: 400;margin: 0">{{ title }}</h3>
        <el-tooltip content="关闭页面" placement="top" effect="light">
          <el-button icon="el-icon-circle-close" circle  @click="toggle"></el-button>
        </el-tooltip>
      </div>
      <el-card>
        <el-form :inline="true" ref="form" :model="queryMap"  size="small" style="margin-top: 2vh">
          <el-form-item label="用户昵称">
            <el-input
                style="width: 9.1vw"
                clearable
                v-model="queryMap.userName"
                placeholder="请输入用户名"
            ></el-input>
          </el-form-item>
          <el-form-item  prop="department">
<!--            <el-select v-model="queryMap.deptId" style="width: 9.4vw" filterable placeholder="请选择部门">-->
<!--              <el-option label="全部" value="">-->
<!--              </el-option>-->
<!--              <el-option-->
<!--                  v-for="(dept) in deptList"-->
<!--                  :key="dept.deptId"-->
<!--                  :label="dept.deptName"-->
<!--                  :value="dept.deptId">-->
<!--              </el-option>-->
<!--            </el-select>-->
            <template>
              <!-- 代理所有属性、事件：v-bind="$attrs" v-on="$listeners" -->
              <el-select style="width: 30vh;"  ref="select" v-model="selectedItem" placeholder="请选择部门"
                          class="tree-select"
              >
                <el-option   style="height: 30vh"
                             class="tree-option view-scroll" >
                  <!-- data：数据-->
                  <!-- props：数据结构配置 -->
                  <!-- node-key：唯一标识字段 -->
                  <el-tree
                      style="height: 10vh"
                      ref="tree" :data="this.deptList" :node-key="option.value" :props="option"
                      class="tree-select-innertree" @current-change="selectDeptID"
                      :highlight-current="true"
                  ></el-tree>
                </el-option>
              </el-select>
            </template>
          </el-form-item>
            <div style="display: flex;margin-bottom: 2vh">
              <div style=";flex: 1">
                <el-form-item prop="role"  label="客户账户">
                  <el-select
                      clearable
                      style="width: 140px;"
                      placeholder="请选择账户"
                      v-model="queryMap.accountName"
                      @change="getDeptClientList"
                  >
                    <el-option
                        v-for="(name) in accountName"
                        :key="name"
                        :label="name"
                        :value="name">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
              <el-button style="margin-right: 2vh;height: 4.5vh" type="primary" icon="el-icon-search" @click="selectUser">查询</el-button>
            </div>
        </el-form>
        <el-table ref="multipleTable"  :data="tableData" size="small"  @selection-change="handleSelectionChange"
                  border style="width: 97%;" height="300">
          <el-table-column type="selection" prop="userId" width="40"></el-table-column>
          <el-table-column label="用户列表" width="600">
            <template v-slot="{ row }">
              {{ row.userName }}（{{ row.nickName }}）  账户：({{row.accountName}})
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-button type="primary" id="affirmBtn" @click="confirmUserId">确认</el-button>
    </el-main>
  </div>
</template>
<script>
export default {
  data(){
    return{
      electUsersBoxShow:this.isShow,
      selectedItem:'',
      multipleSelection:[],
      deptList:[],
      accountName : [],
      deptSelect:'',
      queryMap: Object.assign(
          { deptId:'',
            userName:'',
            accountName:''
          },this.termMap),
      option: {
        label: 'deptName', // 树形结构中每个节点的标签属性
        value: 'deptId', // 树形结构中每个节点的值属性
        children: 'children' // 树形结构中每个节点的子节点属性
      },
      tableData: [],
    }
  },
  methods:{
    toggle() {
      this.electUsersBoxShow = false
      this.$emit('updateElectUsersBoxShow')
    },
    /**
     * 全选功能
     *
     */
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log("******************************",val);
    },
    async getDeptClientList(){
      if (this.queryMap.accountName==null || this.queryMap.accountName==0){
        await this.getDeptList();
      }else {
        this.queryMap.deptId = "";
        const {data: res} = await this.$http.get("/system/dept/findDeptByAccountName/"+this.queryMap.accountName);
        if (!res.success) {
          return this.$message.error("获取部门信息失败:" + res.data.errorMsg);
        }
        this.deptList=res.data.tree;
      }
      this.selectedItem='';
    },
    async getDeptList(){
      const {data: res} = await this.$http.get("system/dept/tree");
      if (res.success) {
        //console.log("-----------------------------------")
        //console.log(JSON.stringify(res.data.tree))
        this.deptList=res.data.tree;
      }
      // const { data: res } = await this.$http.get("/system/departmentUtils/getDeptByUserId/");
      // if(res.success){
      //   this.deptList = res.data;
      // } else {
      //   return this.$message.error("系统通知信息编辑失败:" + res.data);
      // }
    },
    async selectUser(){
      const { data: res } = await this.$http.post("/system/departmentUtils/getUserListByMap/",this.queryMap);
      if(res.success){
        this.tableData = res.data;
      } else {
        return this.$message.error("系统通知信息编辑失败:" + res.message);
      }
    },
    /**
     * 获得账号信息
     */
    async getAccountNameList() {
      const {data: res} = await this.$http.get("/system/user/qt/findRoleList");
      if (!res.success) {
        return this.$message.error("获取角色信息失败:" + res.data.errorMsg);
      }
      this.accountName = res.data

    },
    confirmUserId(){
      if (this.multipleSelection.length==0){
        this.$message('未选择用户');
        return;
      }
      let ids=[]
      for (const user of  this.multipleSelection) {
        ids.push(user.userId)
      }
      this.$emit('confirmUserId',ids)
      this.toggle();
    },
    selectDeptID(data){
      this.selectedItem=data.deptName;
      this.queryMap.deptId=data.deptId;
    },
  },
  props: {
    termMap:{
      type:Object,
    },
    isShow: {
      type: Boolean,
      default: false
    },
    title:{
      type:String,
    },
    userId:{
      type:Number,
    }
  },
  watch: {
    isShow(newVal) {
      this.electUsersBoxShow = newVal
    }
  },
  created() {
      this.getDeptList()
      this. selectUser()
    this.getAccountNameList();
  }
}
</script>
<style scoped>

.popups{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  background-color: #00000044;
  z-index: 100;
}
.popups .el-main{
  margin: 15vh auto;
  background-color: #f0f0f0;
}
.popups .el-main .header{
  display: flex;
  justify-content: center;
  margin-bottom: 2vh;
  font-weight: 100;
}
.popups .el-main .header button {
  flex-shrink: 0; /* 防止收缩 */
  font-size: 3vh;
  height: 4.6vh;
  border: none;
  background-color: #f0f0f0;
}
.el-card{
  height: 83%;
}
#affirmBtn{
  margin: 1.7vh 0 0 57vh;
}

.el-select-dropdown__item.hover{
  background-color: #fff !important;
}

</style>